<template>
	<view class="wrap">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎注册慕白博客</view>
			<u-form :model="form" ref="uForm" :label-width="130" label-align="center">
				<u-form-item label="用户名" prop="username">
					<u-input placeholder="请输入用户名" v-model="form.username" />
				</u-form-item>
				<u-form-item label="邮箱" prop="mail">
					<u-input placeholder="请输入邮箱" type="text" v-model="form.mail" />
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeText}}</u-button>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</u-form-item>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname">
					<u-input type="text" v-model="form.nickname" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input type="password" v-model="form.password" />
				</u-form-item>
				<u-form-item label="确认密码" prop="password2">
					<u-input type="password" v-model="form.password2" />
				</u-form-item>
			</u-form>
			<view class="tips"></view>
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">注册</button>
			<view class="alternative">
			</view>
		</view>
		<view class="buttom">
			<view class="hint">
				注册代表同意
				<text class="link">慕白博客用户协议、隐私政策，</text>
				并授权使用您的慕白博客账号信息（如昵称、头像）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				codeText: '点击获取验证码',
				form: {
					username: '',
					mail: "",
					password: "",
					password2: "",
					code: "",
					nickname: "",
				},
				codeTips: "",
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mail: [{
							required: true,
							message: '请输入邮箱',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.email(value);
							},
							message: '邮箱输入不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}

					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur']
					}],
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}, {
						required: true,
						min: 6,
						message: '密码大于等于6位数',
						trigger: ['blur']
					}],
					password2: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return value == this.form.password;
						},
						message: '确认密码和密码不一致',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}]
				}
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (1) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let Form = this.form
						this.$u.api.postregister(this.form).then(res => {
							console.log(res)
							if(res.code==500)
								this.$refs.uTips.show({
									title: res.msg,
									type: 'warning',
									duration: '2300'
								})
							else
								if(res.code==200){
									this.$u.api.postlogin(Form).then(res => {
										console.log(res);
										if (res.code == 500){
											this.$refs.uTips.show({
												title: res.msg,
												type: 'error',
												duration: '2300'
											})
											return
										}
										this.$u.api.postinfo(res.data.token).then(rs => {
											console.log(rs)
											let info = {
												username: this.form.username,
												password: this.form.password,
												img: rs.data.imgurl,
												nickname: rs.data.nickname,
												email: rs.data.email
											}
											this.$u.vuex('vuex_user', info);
											this.$u.vuex('vuex_token', res.data.token);
											this.$u.route({
												url: '/pages/index/index',
												type: 'switchTab'
											});
										})
									}).catch(err => {
										console.log(err)
									})
								}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$u.test.email(this.form.mail))
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$u.api.postgetvcode({
							mail: this.form.mail
						}).then(res => {
							console.log(res)
							this.$refs.uTips.show({
								title: res.msg,
								type: 'success',
								duration: '2300'
							})
							this.$refs.uCode.start();
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				else
					this.$refs.uTips.show({
						title: '请输入正确的邮箱',
						type: 'warning',
						duration: '2300'
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: #2979FF;
				}
			}
		}
	}
</style>
